<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">

    </div>
</body>

</html>
<script>

    // Vue原型添加一个方法：fly
    Vue.prototype.fly = function () {
        console.log('我是Vue原型对象的方法')
    }



    // 222222222222222222222222222222222222222


    // Vue框架中的组件  实质是Vue.extend函数返回的      构造函数VueComponent

    //同学想法:组件它是一个构造函数，那么在使用组件的时候，不应该new Student.咱们不需要手动去调用
    //Vue框架查看网页,看到了<Student></Student>标签，Vue框架帮你new VueComponent


    const Student = Vue.extend({
        data() {
            return { info: '今天是一点也不饿' }
        },
        template: `<h1 @click="changeInfo">{{info}}</h1>`,
        methods: {
            changeInfo() {

                //组件里面this并非是VM(Vue类的实例),组件实例即为VueComponent类的实例

                //只不过组件实例身上属性与Vue类的时候VM很相似。这是完全不同两个东西。

                //组件里面this：即为VueComponent类的实例,称之为组件的实例(简称VC)；

                this.info = '中午都不想吃饭了';
                console.log(this);
                    //组件实例现在尽然可以借用Vue.prototype的方法
                this.fly();
                 //VC[组件的实例]原型的原型指向的Vue.prototype
                console.log(this.__proto__.__proto__ === VM.__proto__)
                console.log(this.__proto__.__proto__ === Vue.prototype)
            }
        }
    })






    // 222222222222222222222222222222222222222



    // VM->Vue类的实例
    // VM是Vue类的一个实例
    //关联VM
    const VM = new Vue({
        el: '#app',
        components: {
            Student,
        },
        template: `<Student></Student>`
    })

    // 可以调用使用
    VM.fly()
</script>